<template>
  <div>
    <van-icon name="upgrade" size="2.5rem" @click="backtop" id="backtop" />

    <van-icon
      name="cart-circle-o"
      color="#333333"
      :badge="shop_list.length"
      size="2.5rem"
      @click="ShopCatr"
    />
  </div>
</template>
<script>
import { ShopCartList } from "@/api/index";
export default {
  components: {},
  data() {
    return {
      shop_list: [],
    };
  },
  created() {
    this.ShopCartList();
  },
  mounted() {
    window.addEventListener("scroll", this.showbtn, true);
  },
  methods: {
    ShopCatr() {
      if (this.$store.state.token) {
        this.$router.push("/ShopCart");
      } else {
        this.$router.push("/login");
      }
    },
    ShopCartList() {
      let usersId = this.$store.state.user.id;
      ShopCartList(usersId).then((res) => {
        this.shop_list = res.data.data;
      });
    },
    showbtn() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
    },
    backtop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 1.5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
  },
};
</script>

<style scoped lang="scss">
div {
  display: flex;
  flex-direction: column;
  .van-icon {
    margin-top: 2vh;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
  }
}
</style>
